<!--
 * @Author: maqaing
 * @Date: 2021-10-22 14:14:51
 * @LastEditors: 会飞的蕉太狼
 * @LastEditTime: 2021-10-24 19:29:18
 * @Description: 
-->
<template>
  <div>
    <!-- 日志数据 -->
    <el-table :data="tableData.list" style="width: 100%">
      <el-table-column prop="id" label="序号" width="100px" align="center">
      </el-table-column>
      <el-table-column prop="realname" label="访问人真实姓名" align="center">
      </el-table-column>
      <el-table-column prop="method" label="访问方式" align="center">
      </el-table-column>
      <el-table-column prop="content" label="访问路径" align="center">
      </el-table-column>
      <el-table-column prop="logTime" label="访问时间" align="center">
      </el-table-column>
    </el-table>
    <div class="footer">
      <!-- 日志数据的分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";
export default {
  data() {
    return {
      tableData: {},
      queryParams: {
        page: 1,
        pageSize: 10,
      },
      currentPage: 1,
    };
  },
  methods: {
    // 分页查询日志
    pageQueryLog() {
      request
        .get("/baseLog/pageQuery", {
          params: {
            page: this.queryParams.page,
            pageSize: this.queryParams.pageSize,
          },
        })
        .then((res) => (this.tableData = res.data));
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.currentPage = 1;
      this.pageQueryLog();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryParams.page = this.currentPage;
      this.pageQueryLog();
    },
  },
  created() {
    this.pageQueryLog();
  },
};
</script>

<style  scoped>
.footer {
  position: fixed;
  right: 50px;
}
</style>